<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 100px;
            height: 100px;
            
        }
    </style>

    <script>
        window.onload = function(){
            var img = document.getElementById('img');
            //给图片添加鼠标按键被按下的事件
            img.onmousedown = function(event){
                //给文档定义鼠标移动事件
                var mouse_x = event.clientX - img.offsetLeft;
                var mouse_y = event.clientY - img.offsetTop;

                document.onmousemove = function(event){
                    //获取鼠标坐标
                    var x = event.clientX - mouse_x;
                    var y = event.clientY - mouse_y;
                    img.style.marginLeft = x+'px';
                    img.style.marginTop = y+'px';
                    };
                    //给图片赋予鼠标按键松开时的事件
                    document.onmouseup = function(){
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
            }
        }
    </script>
</head>
<body>
    <img src="../img/图标.jgp" alt="图标" id="img">
</body>
</html>